/**
 * 树形页面通用样式
 * 基于 list-page.scss 扩展，专门用于树形结构数据的展示
 * 包含层级背景色、展开/折叠按钮等树形页面特有样式
 */

// 引入基础列表样式
@import './list-page.scss';

// 树形页面层级背景色样式 - 使用明显的对比色
.list-item {
  &.level-0 {
    background: #ffffff; // 父级：纯白色
    border-left: 4px solid #1890ff;
  }
  
  &.level-1 {
    background: #e6f7ff; // 子级：浅蓝色
    border-left: 4px solid #52c41a;
  }
  
  &.level-2 {
    background: #f6ffed; // 孙子级：浅绿色
    border-left: 4px solid #faad14;
  }
  
  &.level-3 {
    background: #fff7e6; // 曾孙级：浅橙色
    border-left: 4px solid #722ed1;
  }
  
  &.level-4 {
    background: #f9f0ff; // 玄孙级：浅紫色
    border-left: 4px solid #13c2c2;
  }
  
  // 更深层级使用循环颜色
  &.level-5, &.level-9 {
    background: #fff1f0; // 浅红色
    border-left: 4px solid #fa8c16;
  }
  
  &.level-6, &.level-10 {
    background: #e6fffb; // 浅青色
    border-left: 4px solid #eb2f96;
  }
  
  &.level-7, &.level-11 {
    background: #f0f9ff; // 浅天蓝色
    border-left: 4px solid #52c41a;
  }
  
  &.level-8, &.level-12 {
    background: #fefce8; // 浅黄色
    border-left: 4px solid #f5222d;
  }
}

// 树形页面展开/折叠按钮样式
.title-with-expand {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 4px;
    
    &:hover {
      background: #e0e0e0;
    }
    
    &:active {
      background: #d0d0d0;
      transform: scale(0.95);
    }
  }
}

// 树形页面特有的状态样式
.status-warning {
  background: #fff7e6;
  color: #fa8c16;
}

// 树形页面操作按钮样式增强
.tree-action-btn {
  &.action-expand {
    background: #f0f9ff;
    color: #1890ff;
    border-color: #91d5ff;
  }
  
  &.action-collapse {
    background: #fff7e6;
    color: #fa8c16;
    border-color: #ffd591;
  }
}

// 树形页面层级指示器
.tree-level-indicator {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e0e0e0;
  }
  
  &::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: #e0e0e0;
  }
}

// 树形页面空状态样式
.tree-empty {
  .list-empty-text {
    color: #999;
    font-size: 14px;
  }
  
  .tree-empty-icon {
    color: #ddd;
    font-size: 48px;
  }
}

// 树形页面加载状态
.tree-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

// 响应式设计
@media (max-width: 768px) {
  .title-with-expand {
    .expand-icon {
      width: 24px;
      height: 24px;
    }
  }
  
  .list-item {
    &.level-0, &.level-1, &.level-2, &.level-3, &.level-4 {
      border-left-width: 3px;
    }
  }
}
